<template>
  <div style="height: 100%;overflow: auto">
    <popup :value="true" :should-rerender-on-show="true" :popup-style="{'z-index':500}"
        :show-mask="false" height="100%" :hide-on-blur="false">
      <x-header v-bind:left-options="{backText: '', preventGoBack: 'true'}" @on-click-back="$router.go(-1)">{{row.PROCESSDEFINITION_NAME}}</x-header>
      <div style="height: calc(100% - 42px)">
        <tab :line-width="3" custom-bar-width="18px" active-color="#343434" default-color="#545454" bar-active-color="#F1A201" v-model="tab">
          <tab-item v-for="(item, index) in tab_titles" :key="index" :selected="tab === index"
            @click="tab = index">{{item}}</tab-item>
        </tab>
        <!-- 详情 -->
        <div v-if="tab == 0" class="content-container">
        </div>
        <!-- 流程 -->
        <div v-if="tab == 1" class="content-container">
        </div>
        <!-- 审批 -->
        <div v-if="tab == 2" class="content-container">
        </div>
        <!-- 委托 -->
        <div v-if="tab == 3" class="content-container">
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import {
  Timeline,
  TimelineItem,
  TimelineTitle
} from 'vue-cute-timeline'
export default {
  name:"hazardInfo",
  data(){
    return {
      tab: 0,
      tab_titles: ['详情', '流转', '审批', '委托'],
      list: []
    }
  }
}
</script>
<style>

</style>
